<script>

  import sheep from '@/sheep';
  import { showAuthModal } from '@/sheep/hooks/useModal';

  export default {
    name: 'familyManagement',
    // components: {USwiper, ImageAvater},
    data() {
      return {
        informationList: [
          {
            name: '照片',
            is_children: false,
            nums: 'moment_images_nums',
            num: 'images_count',
            new: 1,
            icon: 'photo_family_info_icon',
            unit: '张',
          },
          {
            name: '圈子',
            is_children: false,
            num: 'circle_count',
            new: 1,
            icon: 'circle_family_info_icon',
            unit: '条',
          },
          {
            name: '生日',
            is_children: false,
            num: 'memory_birthday_count',
            new: 1,
            icon: 'birthday_family_info_icon',
            unit: '人',
          },
          {
            name: '纪念日',
            is_children: false,
            num: 'memory_memory_count',
            new: 1,
            icon: 'memorialDay_family_info_icon',
            unit: '个',
          },
        ],
      };
    },
    props: {
      info: {
        type: Object,
        default: () => {
          return {};
        },
      },
      showEdit: {
        type: Boolean,
        default: true,
      },
      isApply: {
        type: Boolean,
        default: false,
      },
      index: {
        type: Number,
        default: 0,
      },
      length: {
        type: Number,
        default: 0,
      },
      is_login: {
        type: Boolean,
        default: true,
      },
    },
    watch: {
      info: {
        deep: true,
        handler(newVal, oldVal) {

        },
      },
    },
    computed: {
      IMG_URL() {
        return sheep.$store('AI').sq_image_path;
      },
      nc_image() {
        return sheep.$store('AI').nc_image;
      },
    },
    methods: {
      goToPath() {
        // saveFamilyId({
        //   family_id: this.info.id
        // })
        if (!this.is_login) {
           uni.$emit('openLoginPopup')
          return;
        }
        sheep.$router.go('/pages/family/familyDetails', {
          family_id: this.info.id,
          code: this.info.family_id,
          is_own: this.info.is_owner,
        });
      },
      administration() {
        // this.$nav.navigateTo('/pages/familyPage/familyEdit', {
        //   family_id: this.info.id,
        //   code: this.info.code,
        //   is_own: this.info.is_owner,
        // });
        if (!this.is_login) {
          // showAuthModal();
          uni.$emit('openLoginPopup')
          return;
        }
        sheep.$router.go('/pages/familyPage/familyEdit', {
          family_id: this.info.id,
          code: this.info.family_id,
          is_own: this.info.is_my,
        });
      },
    },
  };
</script>

<template>
  <view class="familyManagement flex flex-column align-center justify-between" :class="index == 0 ? '' : 'mt_25'"
        :style="{
    borderRadius: index == 0 ? '0 0 8rpx 8rpx':'8rpx'
  }" @click.stop="goToPath">
    <view class="wh_662 flex align-center justify-between mt_60 ml_20">
      <view class="familyManagement_left flex flex-column align-center justify-center">
        <image v-if="!info.cover_lsit || info.cover_lsit.length <= 0 || !is_login"
               :src="`${nc_image}/assets/UNIAPP/001.png`"></image>
        <swiper v-else
          class="wh_277 hW_188"
          autoplay
          circular
          indicator-color="rgba(255,255,255,0.1)"
          indicator-active-color="#fff"
          :interval="3000"
          :duration="500"
        >
          <block v-for="(item,index) in info.cover_lsit" :key="index">
            <swiper-item>
              <navigator :url="item.url">
                <image :src="item" class="wh_277 hW_188" mode="aspectFill" />
              </navigator>
            </swiper-item>
          </block>
        </swiper>
      </view>
      <view class="familyManagement_right flex align-center justify-between" :style="{
      width:showEdit ? '581rpx' : '100%'
    }">
        <view class="familyManagement_right_info">
          <view class="familyManagement_right_info_name flex align-center">
            <text class="familyManagement_right_info_name_text">{{ !!is_login ? info.name : info.name }}</text>
            <view v-if="is_login" class="flex align-center ml_20" @click.stop="administration">
              <text class="fs_20 fw_400 color_FFFFFF">设置</text>
              <image :src="`${IMG_URL}/index/family_edit_icon.png`" class="ml_4"
                     style="width: 25rpx;height: 25rpx;"
              ></image>
            </view>
          </view>
          <view class="familyManagement_right_info_code">
            <text class="familyManagement_right_info_code_text">家庭号：{{ is_login ? info.family_id : 'F66666' }}</text>
          </view>
          <view class="familyManagement_right_info_code" style="margin: -5rpx 0 8rpx 0">
            <text class="familyManagement_right_info_code_text">发起人：{{ is_login ? info.create_user_name : '拾亲' }}
            </text>
          </view>
          <view v-if="is_login" class="familyManagement_right_info_imageList flex align-center">
            <view v-for="(item,index) in info.member_limit" :key="index">
              <s-avatar :width="45"
                        :height="45"
                        margin="0 0 0 0"
                        :src="`${item.avatar}`"
              >
              </s-avatar>
            </view>
            <view class="flex align-center title_color ml_15">
              {{ !!is_login ? info.member_count : 10 }}人
              <text class="title_feature" v-if="false">+1</text>
            </view>
          </view>
          <view v-else class="familyManagement_right_info_imageList flex align-center">
            <s-avatar v-for="(item,index) in info.member_limit" :key="index" :width="45" :height="45"
                      margin="0 0 0 0" :src="item.avatar"></s-avatar>
            <view class="flex align-center title_color ml_15">
              {{ !!is_login ? info.member_count : 10 }}人
              <text class="title_feature" v-if="false">+1</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="flex align-center justify-between mr_20 mb_20" style="width: 80%;">
      <view v-for="(item,ins) in informationList" :key="ins" class="flex align-center">
        <!--        <image style="width: 24rpx;height: 24rpx;" :src="`${IMG_URL}${item.icon}.png`"></image>-->
        <view class="title_color ml_4">{{ item.name }}</view>
        <view class="title_color ml_5">
          {{ !item.is_children ? (!!is_login ? info[item.num] : 10) : (!!is_login ? info[item.num][0][item.nums] : 10)
          }}{{ item.unit }}
        </view>
        <view class="title_feature" v-if="false">
          +{{ item.new }}
        </view>
      </view>
    </view>
    <!--    <view class="line" :style="{-->
    <!--        background: info.is_init == 1 && info.is_own == 1 ? '#FC6F6F':info.is_init != 1 && info.is_own == 1 ? '#A5FC6F':'none'-->
    <!--      }"></view>-->
  </view>
</template>

<style scoped lang="scss">
  .familyManagement {
    width: 702rpx;
    height: 338rpx;
    background: #FF7D57;
    border-radius: 20rpx 20rpx 20rpx 20rpx;

    .familyManagement_left {
      width: 277rpx;
      height: 188rpx;
      border-radius: 8rpx 8rpx 8rpx 8rpx;

      image {
        width: 277rpx;
        height: 188rpx;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
      }
    }

    .familyManagement_right {
      width: 581rpx;
      height: 153rpx;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      position: relative;

      .familyManagement_right_info {
        padding: 12rpx 21rpx;

        .familyManagement_right_info_name {
          &_text {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 36rpx;
            color: #FFFFFF;
          }

          .familyManagement_right_info_name_remarks {
            height: 30rpx;
            padding: 0 17rpx;
            background: #FF7950;
            border-radius: 15rpx 15rpx 15rpx 15rpx;

            &_text {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 16rpx;
              color: #FFFFFF;
            }
          }

          &_image {
            width: 30rpx;
          }
        }

        .familyManagement_right_info_code {
          &_text {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 26rpx;
            color: rgba(255, 255, 255, 0.85);
          }
        }
      }

      .familyManagement_right_icon {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 15rpx;

        .familyManagement_right_icon_code {
          width: 30rpx;
          height: 30rpx;
        }

        .familyManagement_right_icon_arrow {
          width: 37rpx;
          height: 37rpx;
        }
      }

      .familyManagement_right_join {
        width: 133rpx;
        height: 48rpx;
        background: #FF4206;
        border-radius: 41rpx 41rpx 41rpx 41rpx;

        .familyManagement_right_join_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 24rpx;
          color: #FFFFFF;
        }
      }

      .familyManagement_icon {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 15rpx;

        .familyManagement_icon_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 22rpx;
          color: #FF4206;
        }
      }
    }
  }

  .title_color {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    font-size: 24rpx;
    color: rgba(255, 255, 255, 0.8);
    white-space: nowrap;
  }

  .title_feature {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    font-size: 22rpx;
    color: #F6FF0A;
    white-space: nowrap;
  }
</style>